<template>
  <div class="app-container">

    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="pyqQuery.userId" placeholder="用户ID"/>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="searchList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <el-table
      :data="list"
      border
      fit
      highlight-current-row>

      <el-table-column
        type="index"
        label="序号"
        width="70"
        align="center">
      </el-table-column>

      <el-table-column
        prop="userId"
        label="用户ID"
        width="300"
        align="center">
      </el-table-column>

      <el-table-column label="朋友圈图片" align="center" prop="pyqPicture" width="300">
        <template slot-scope="scope">
          <el-image class=""
                    :src="scope.row.pyqPicture"
                    :preview-src-list="srcList" @click="preview(scope.row.pyqPicture)" width="240" height="200">
          </el-image>
        </template>
      </el-table-column>

      <el-table-column
        prop="pyqContent"
        label="内容"
        width="600"
        align="center">
      </el-table-column>

      <el-table-column
        label="评论管理"
        width="100"
        align="center">
        <template slot-scope="scope">
          <el-button type="info" size="mini" @click="getComment(scope.row.pyqId)">
            评论
          </el-button>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="328"
        align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" :disabled="scope.row.isPoor>0"
                     @click="deletePyq(scope.row.pyqId)">
            违规删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />


    <el-drawer
      title="朋友圈评论"
      :visible.sync="table"
      direction="rtl"
      size="30%">
      <el-table :data="pyqComment">
        <el-table-column prop="comment" label="评论" width="470"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete" circle
              @click="handleDelete(scope.row.commentId,scope.row.pyqId)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>

  </div>
</template>
<script>

import pyq from '@/api/wd/pyq'

export default {
  data() {
    return {
      list: null,
      page: 1,//当前页
      limit: 10,//每页记录数
      total: 0,//总记录数
      table: false,//抽屉开关
      srcList: [], //放大图片容器
      dialogVisible: false, //是否展示编辑框
      pyqQuery: {
        userId: ""
      },
      pyqComment: []

    };
  },
  created() { //页面渲染之前执行，一般调用methods定义的方法
    //调用
    this.getList()
  },
  methods: {
    getList(page = 1) {
      this.page = page
      pyq.getPyqList(this.page, this.limit)
        .then(response => {
          this.list = response.data.list
          this.total = response.data.total
        })
    },
    //带条件查询
    searchList(page = 1) {
      this.page = page
      pyq.searchPyqList(this.page, this.limit, this.pyqQuery)
        .then(response => {
          this.list = response.data.list
          this.total = response.data.total
        })
    },
    //图片预览
    preview(picture) {
      this.srcList = []
      this.srcList.push(picture)
    },
    //获取评论
    async getComment(pyqId) {
      this.table = true
      this.pyqComment = []
      const res = await pyq.getPyqComment(pyqId)
      this.pyqComment = res.data.list
    },
    //删除评论
    async handleDelete(commentId, pyqId) {
      const res = await pyq.deleteComment(commentId)
      if (res.code == "20000") {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }
      this.pyqComment = []
      const resa = await pyq.getPyqComment(pyqId)
      this.pyqComment = resa.data.list
    },
    resetData() {
      this.pyqQuery = {}
      this.getList()
    },
    //删除圈子
    async deletePyq(pyqId) {
      const res = await pyq.deletePyq(pyqId)
      if (res.code == "20000") {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }
      this.getList()
    }

  }
}
</script>
